<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style>
			/* 外边距margin属性：  【微调：文字或者图片】 
			margin使用问题1：  自适应居中，建议使用div，套块元素、行内块元素、行内元素
			      使用问题2：    行元素、上下外边距失效，右左边距---
				      行元素：不可以设置高宽【高---不可以动上下】、在一行内显示【宽---可以左右】
				  使用问题3：垂直外边距
				  使用问题4：垂直外边距
				  */
			img{
				border: 1px solid red;
			/* margin：1个属性值    顺时针：   上  右  下  左*/
				margin: 200px;
			/* margin：2个属性值    顺时针：   上下  右左*/
				margin:  10px  200px;
				/* 常用：盒子自适应居中 ----失效
				行内块：可以设置高宽、在一行内显示、无法居中
				margin使用问题：    自适应居中，必须设置宽度
				*/
			   width: 100%;
				margin: 0 auto;
			/* margin： 3个属性值       顺时针 上  右   左下*/
			mar gin: 100px 200px 300px 400px;
			/* margin： 4个属性值       顺时针 上  右   下   左*/
			mar gin: 100px 200px 300px 400px;
			}
			h1{
				/*块元素：可以设置高宽、不在一行内显示、无法居中，内置文本
				text-align: center;
				*/
				/* 常用：盒子自适应居中 ----失效*/
				width: 100%;
				border: 1px solid red;
				text-align: center;
				margin: 1000px  200px;
				}
				span{
					/*行元素：不可以设置高宽【高---不可以动上下】、在一行内显示【宽---可以左右】、无法居中，内置文本
					text-align: center;
					*/
					/* 常用：盒子自适应居中 ----失效*/
					width: 100%;
					border: 1px solid red;
						margin: 100px 200px;
						}
				div{
					width: 200px;
					height: 200px;
					background: red;
					margin: 0 auto;
				}
			}
		</style>
	</head>
	<body>
		<div></div>
		<!-- 框模型、盒子模型、：四个部分组成，
		                        外边距：边框以外四周，叫做外边距
								margin属性：
								边框：--
								内边距（填充）：边框以内 与内容 之间距离，叫做内边距
								内容：块   行   行内元素本身宽高
		所有元素存在于框模型之中 -->
		<h1>块级元素</h1>
		<img src="img/薛之谦.jpg" width="300px" height="300px" alt="圣诞">
		<span>行内元素：xuezhiqian</span>
	</body>
</html>